<style lang="stylus" type="text/stylus">
@import './onlinePolicy.styl';

.ivu-modal {
  .ivu-modal-content {
    .ivu-modal-header {
      text-align: center;
      background-color: #fff;
      color: #000;

      .ivu-modal-header-inner {
        font-size: 16px;
      }
    }

    .ivu-modal-body {
      padding: 20px 30px;

      .modalScroll {
        position: relative;
        width: 100%;
        height: 500px;

        .notGroupingList {
          margin-bottom: 30px;

          .notGroupingListTitle {
            display: flex;
            justify-content: space-between;

            &:hover {
              .listBtn {
                .delBtn {
                  display: block;
                }

                .downUp {
                  display: block;
                }
              }
            }

            .notGroupingTitleName {
              font-size: 20px;
              font-weight: bold;
              color: #999;
            }

            .listBtn {
              display: flex;
              justify-content: space-between;

              .delBtn {
                display: none;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 30px;
                cursor: pointer;

                &:hover {
                  border: 1px solid #ccc;
                  border-radius: 3px;
                }
              }

              .downUp {
                display: none;
                position: relative;
                width: 30px;
                height: 30px;

                .upBtn {
                  position: absolute;
                  top: 0;
                  width: 100%;
                  height: 15px;
                  line-height: 15px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }

                .downBtn {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 15px;
                  line-height: 15px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }
              }
            }
          }

          .notGroupingListContent {
            font-size: 14px;
          }

          > ul {
            > li {
              width: 100%;
              height: 40px;
              background-color: #eee;
              margin-top: 10px;
              display: flex;
              justify-content: space-between;

              &:hover {
                .downUp {
                  display: block;
                }
              }

              .policyName {
                display: inline-block;
                height: 40px;
                line-height: 40px;
                text-indent: 10px;
              }

              .downUp {
                display: none;
                position: relative;
                width: 40px;
                height: 40px;

                .upBtn {
                  position: absolute;
                  top: 0;
                  width: 100%;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }

                .downBtn {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }
              }
            }
          }
        }

        .isGroupingList {
          position: relative;
          margin-bottom: 30px;
          z-index: 0;

          .ivu-btn-info {
            position: absolute;
            top: 18px;
            left: 0;
            display: inline-block;
            width: 55px;
            height: 55px;
            line-height: 48px;
            text-align: center;
            cursor: pointer;
            color: #fff;
            font-size: 30px;
          }

          .showPic {
            position: absolute;
            left: 0;
            top: 0;
            width: 55px;
            text-align: center;
            height: 55px;
            line-height: 48px;
            font-size: 30px;

            > img {
              width: 100%;
              height: 100%;
            }

            &:hover {
              .delPic {
                display: block;
              }
            }

            .delPic {
              position: absolute;
              top: 0;
              left: 0;
              display: none;
              width: 55px;
              height: 55px;
              line-height: 55px;
              text-align: center;
              background-color: rgba(0, 0, 0, 0.6);
              color: #fff;
              font-size: 20px;
              z-index: 1;
              cursor: pointer;
            }
          }

          .isGroupingListTitle {
            width: calc(100% - 120px);
            margin: 0px 60px 0px 60px;

            .GroupingListTitle {
              font-size: 20px;
              font-weight: bold;
              color: #000;
              border: 0px solid #000;
            }

            .GroupingListTitleSmall {
              display: none;
            }

            &:hover {
              .listBtn {
                .ivu-poptip-rel {
                  display: block;
                }

                .downUp {
                  display: block;
                }
              }
            }

            // &:focus {
            // border: 1px solid #000;
            // }
            .listBtn {
              position: absolute;
              top: 8px;
              right: 0;
              width: 60px;
              height: 30px;
              display: flex;
              justify-content: space-between;

              .ivu-poptip-rel {
                display: none;

                &:hover {
                  border: 1px solid #ccc;
                  border-radius: 3px;
                }
              }

              .downUp {
                display: none;
                position: relative;
                width: 30px;
                height: 30px;

                .upBtn {
                  position: absolute;
                  top: 0;
                  width: 100%;
                  height: 15px;
                  line-height: 15px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }

                .downBtn {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 15px;
                  line-height: 15px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }
              }
            }
          }

          .isGroupingListContent {
            width: calc(100% - 60px);
            margin-left: 60px;
            font-size: 14px;
            border: 0px solid #000;
          }

          > ul {
            > li {
              width: 100%;
              height: 40px;
              background-color: #eee;
              margin-top: 10px;
              display: flex;
              justify-content: space-between;

              &:hover {
                .downUp {
                  display: block;
                }
              }

              .policyName {
                display: inline-block;
                height: 40px;
                line-height: 40px;
                text-indent: 10px;
              }

              .downUp {
                display: none;
                position: relative;
                width: 40px;
                height: 40px;

                .upBtn {
                  position: absolute;
                  top: 0;
                  width: 100%;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }

                .downBtn {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 20px;
                  line-height: 20px;
                  text-align: center;
                  font-size: 18px;
                  cursor: pointer;

                  &:hover {
                    border: 1px solid #ccc;
                    border-radius: 2px;
                  }
                }
              }
            }
          }
        }
      }

      .addGroupingBtn {
        margin-top: 10px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        background-color: skyblue;
      }
    }
  }
}
</style>

<template>
  <div class="fundShell">
    <VuePerfectScrollbar class="LookFundList">
      <div class="fundList">
        <ul
          class="fundList-nav"
          v-show="notpolicyGroup != ''"
        >
          <div class="notGrouping">
            <p class="notGroupingTitle">未分组政策</p>
            <p class="notGroupingContent">未分组的政策无法正常展示给用户，请尽快分组</p>
          </div>
          <li
            class="fundList-nav-items"
            v-for="(notGroupPolicy, notGroupPolicyIndex) in notpolicyGroup"
            :key="notGroupPolicyIndex"
          >
            <router-link :to="`/policyDetail/`+ notGroupPolicy.id">
              <div class="fundList-nav-img"><img
                  :src="notGroupPolicy.bigPic"
                  style="width:200px;height:200px;"
                ></div>
              <div class="fundList-nav-content">
                <div class="shortTitle">{{notGroupPolicy.shortTitle}}</div>
                <div class="longTitle">{{notGroupPolicy.longTitle}}</div>
                <div class="supportNumber">{{notGroupPolicy.spirit}}</div>
              </div>
            </router-link>
          </li>
        </ul>
        <ul
          class="fundList-nav"
          v-for="(policyGroup,policyGroupIndex) in policyGroup"
          :key="policyGroupIndex"
        >
          <div class="isGrouping clearfix">
            <div
              v-show="policyGroup.smallPic"
              class="bigPic"
            ><img
                :src="policyGroup.smallPic"
                alt=""
              ></div>
            <div class="contentLeft">
              <p class="isGroupingTitle">{{policyGroup.title}}</p>
              <p class="isGroupingContent">{{policyGroup.content}}</p>
            </div>
          </div>
          <li
            class="fundList-nav-items"
            v-for="(isGrouping, isGroupingIndex) in policyGroup.policy"
            :key="isGroupingIndex"
          >
            <router-link :to="`/policyDetail/`+ isGrouping.id">
              <div class="fundList-nav-img"><img
                  :src="isGrouping.bigPic"
                  style="width:200px;height:200px;"
                ></div>
              <div class="fundList-nav-content">
                <div class="shortTitle">{{isGrouping.shortTitle}}</div>
                <div class="longTitle">{{isGrouping.longTitle}}</div>
                <div class="supportNumber">{{isGrouping.spirit}}</div>
              </div>
            </router-link>
          </li>
        </ul>

      </div>
    </VuePerfectScrollbar>
    <div
      class="adjustBtn"
      @click="modal1 = true"
    >
      <Button>调整政策组</Button>
    </div>
    <Modal
      v-model="modal1"
      title="调整政策组"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <VuePerfectScrollbar class="modalScroll">
        <div class="notGroupingList">
          <div class="notGroupingListTitle">
            <div class="notGroupingTitleName">未分组政策</div>
            <div class="listBtn">
              <span class="delBtn">
                <Icon type="ios-close-empty"></Icon>
              </span>
              <span class="downUp">
                <Icon
                  class="upBtn"
                  type="ios-arrow-up"
                ></Icon>
                <Icon
                  class="downBtn"
                  type="ios-arrow-down"
                ></Icon>
              </span>
            </div>
          </div>
          <p class="notGroupingListContent">未分组的政策无法正常展示给用户，请尽快分组。</p>
          <ul>
            <li
              v-for="(notGroupPolicy, notGroupPolicyIndex) in notpolicyGroup"
              :key="notGroupPolicyIndex"
            >
              <span class="policyName">{{notGroupPolicy.shortTitle}}</span>
              <span class="downUp">
                <span @click="unitDownUp(notGroupPolicyIndex,true)">
                  <Icon
                    class="upBtn"
                    type="ios-arrow-up"
                  ></Icon>
                </span>
                <span @click="unitDownUp(notGroupPolicyIndex)">
                  <Icon
                    class="downBtn"
                    type="ios-arrow-down"
                  ></Icon>
                </span>
              </span>
            </li>
          </ul>
        </div>
        <div
          class="isGroupingList"
          v-for="(isGrouping,isGroupingIndex) in policyGroup"
          :key="isGroupingIndex"
        >
          <Upload
            v-show="!isGrouping.smallPic"
            :action="_URL_v2 + '/filecommon/uploadFile?moduleName=help'"
            :on-success="handleSuccess"
            :show-upload-list="false"
          >
            <Button
              @click="beforeUpload(isGroupingIndex)"
              type="info"
            >
              <Icon type="ios-plus-empty"></Icon>
            </Button>
          </Upload>
          <div
            v-if="isGrouping.smallPic"
            class="showPic"
          >
            <img
              :src="isGrouping.smallPic"
              alt=""
            >
            <div
              @click="deletePic(isGroupingIndex)"
              class="delPic"
            >
              <Icon type="ios-trash-outline"></Icon>
            </div>
          </div>
          <div class="isGroupingListTitle">
            <input
              type="text"
              ref="groupingListTitleInfo"
              class="GroupingListTitle"
              placeholder="请输入组名称"
              v-model="isGrouping.title"
              value=""
            >
            <input
              type="text"
              class="GroupingListTitleSmall"
              placeholder="请输入组名称"
              v-model="isGrouping.smallPic"
              value=""
            >
            <div class="listBtn">
              <Poptip
                confirm
                title="您确认删除这条内容吗？"
                @on-ok="ok01(isGroupingIndex)"
                @on-cancel="cancel01"
                placement="right"
                size="small"
              >
                <Button>
                  <Icon type="ios-close-empty"></Icon>
                </Button>
              </Poptip>
              <span class="downUp">
                <span @click="unitDownUp02(isGroupingIndex,true)">
                  <Icon
                    class="upBtn"
                    type="ios-arrow-up"
                  ></Icon>
                </span>
                <span @click="unitDownUp02(isGroupingIndex)">
                  <Icon
                    class="downBtn"
                    type="ios-arrow-down"
                  ></Icon>
                </span>
              </span>
            </div>
          </div>

          <input
            type="text"
            ref="isGroupingListContentInfo"
            class="isGroupingListContent"
            placeholder="请输入组描述"
            v-model="isGrouping.content"
            value=""
          >
          <ul>
            <li
              v-for="(isGroupList, isGroupListIndex) in isGrouping.policy"
              :key="isGroupListIndex"
            >
              <span class="policyName">{{isGroupList.shortTitle}}</span>
              <span class="downUp">
                <span @click="unitDownUp01(isGroupingIndex,isGroupListIndex,true)">
                  <Icon
                    class="upBtn"
                    type="ios-arrow-up"
                  ></Icon>
                </span>
                <span @click="unitDownUp01(isGroupingIndex,isGroupListIndex)">
                  <Icon
                    class="downBtn"
                    type="ios-arrow-down"
                  ></Icon>
                </span>
              </span>
            </li>
          </ul>
        </div>
      </VuePerfectScrollbar>
      <div
        class="addGroupingBtn"
        @click="addGrouping"
      >
        添加政策组
      </div>
    </Modal>

    <Spin
      size="large"
      fix
      v-if="spinShow"
    ></Spin>
  </div>
</template>

<script>
export default {
  name: "onlinePolicy",
  data() {
    return {
      notpolicyGroup: [], // 未分组政策列表
      policyGroup: [], // 以分组数据
      modal1: false, // 模态框控制
      isShowPic: false, // 展示上传后的图片
      isShowBtn: true, // 展示上传图片的按钮
      smallPicIndex: "", // 政策图片索引
      smallPic: "", // 政策图片
      defaultList: [], // 上传图片后保存的列表
      spinShow: true // 页面加载
    };
  },
  computed: {
    componentUrl() {
      this._SERVER == 11812695244
        ? "http://118.126.95.244/admin"
        : this._SERVER == 120236189
        ? "http://120.236.1.89/admin"
        : "http://172.16.6.46/admin";
    },
    getToken() {
      return "7c4a8d09ca3762af61e59520943dc26494f8941b";
    }
  },
  methods: {
    // 确定保存新建的政策组
    ok() {
      this.$Message.info("政策分组保存成功！");
      let policyJsonStr01 = JSON.stringify(this.policyGroup);
      this.ajaxData(
        {
          // contentType: "json",
          type: "post",
          url: `/policy/savePolicyGroup`,
          data: {
            policyJson: "{policyGroup:" + policyJsonStr01 + "}"
          }
        },
        res => {
          this.savePolicyGroupRes = res;
        }
      );
    },
    // 取消保存新建的政策组
    cancel() {
      this.$Message.info("政策分组取消保存！");
    },
    // 删除选中政策组
    ok01(groupingIndex) {
      this.policyGroup.splice(groupingIndex, 1);
      this.$Message.info("删除成功！");
    },
    // 取消删除当前政策组
    cancel01() {
      this.$Message.info("取消删除！");
    },
    // 新增政策组
    addGrouping() {
      this.isShowPic = false;
      this.isShowBtn = true;
      const unit = {
        title: "",
        content: "",
        smallPic: "",
        policy: []
      };
      this.policyGroup.push(unit);
    },
    // 图片上传之前的钩子函数
    beforeUpload(index) {
      this.smallPicIndex = index;
    },
    //  上传图片
    handleSuccess(file) {
      this.isShowPic = true;
      this.isShowBtn = false;
      this.policyGroup[this.smallPicIndex].smallPic = file.result.filePath;
      // this.policyGroup[0].smallPic = this.smallPic;
    },
    //  删除图片
    deletePic(smallPicIndex) {
      if (confirm("您确定删除这张图片吗？")) {
        this.isShowBtn = true;
        this.isShowPic = false;
        this.policyGroup[smallPicIndex].smallPic = "";
        this.$Message.info("照片删除成功！");
      } else {
        this.$Message.info("取消删除照片！");
      }
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    //  未分组的数据上下移动
    unitDownUp(notGroupPolicyIndex, up) {
      let arr = this.notpolicyGroup;
      if (up) {
        if (arr.length > 1 && notGroupPolicyIndex != 0) {
          let x = notGroupPolicyIndex,
            y = notGroupPolicyIndex - 1;
          this.swapItems(arr, x, y);
        } else {
          this.$Message.error("已经是第一个");
        }
      } else {
        if (arr.length > 1 && notGroupPolicyIndex != arr.length - 1) {
          let x = notGroupPolicyIndex + 1,
            y = notGroupPolicyIndex;
          this.swapItems(arr, x, y);
        } else {
          if (!this.policyGroup.length) {
            this.$Message.error("请添加政策分组");
          } else {
            this.policyGroup[0].policy.push(arr[notGroupPolicyIndex]);
            this.notpolicyGroup.splice(notGroupPolicyIndex, 1);
          }
        }
      }
    },
    //  以分组的数据上下移动
    unitDownUp01(isGroupingIndex, isGroupListIndex, up) {
      let arr1 = this.policyGroup[isGroupingIndex].policy;
      if (up) {
        if (arr1.length > 1 && isGroupListIndex != 0) {
          let x = isGroupListIndex,
            y = isGroupListIndex - 1;
          this.swapItems(arr1, x, y);
        } else {
          if (isGroupingIndex == 0) {
            this.notpolicyGroup.push(arr1[isGroupListIndex]);
            this.policyGroup[isGroupingIndex].policy.splice(
              isGroupListIndex,
              1
            );
          } else {
            this.policyGroup[isGroupingIndex - 1].policy.push(
              arr1[isGroupListIndex]
            );
            this.policyGroup[isGroupingIndex].policy.splice(
              isGroupListIndex,
              1
            );
          }
        }
      } else {
        if (arr1.length > 1 && isGroupListIndex != arr1.length - 1) {
          let x = isGroupListIndex + 1,
            y = isGroupListIndex;
          this.swapItems(arr1, x, y);
        } else {
          if (this.policyGroup.length == isGroupingIndex + 1) {
            this.$Message.error("请添加政策分组");
          } else {
            this.policyGroup[isGroupingIndex + 1].policy.push(
              arr1[isGroupListIndex]
            );
            this.policyGroup[isGroupingIndex].policy.splice(
              isGroupListIndex,
              1
            );
          }
        }
      }
    },
    //  以分组的大分组数据上下移动
    unitDownUp02(isGroupingIndex, up) {
      let arr2 = this.policyGroup;
      if (up) {
        if (arr2.length > 1 && isGroupingIndex != 0) {
          let x = isGroupingIndex,
            y = isGroupingIndex - 1;
          this.swapItems(arr2, x, y);
        } else {
          if (isGroupingIndex == 0) {
            this.$Message.error("已经是第一个了");
          } else {
            this.policyGroup[isGroupingIndex - 1].policy.push(
              arr2[isGroupingIndex]
            );
            this.policyGroup[isGroupingIndex].policy.splice(isGroupingIndex, 1);
          }
        }
      } else {
        if (arr2.length > 1 && isGroupingIndex != arr2.length - 1) {
          let x = isGroupingIndex + 1,
            y = isGroupingIndex;
          this.swapItems(arr2, x, y);
        } else {
          if (this.policyGroup.length == isGroupingIndex + 1) {
            this.$Message.error("请添加政策分组");
          } else {
            this.policyGroup[isGroupingIndex + 1].policy.push(
              arr2[isGroupingIndex]
            );
            this.policyGroup[isGroupingIndex].policy.splice(isGroupingIndex, 1);
          }
        }
      }
    }
  },
  created() {
    this.ajaxData(
      {
        type: "post",
        url: "/policy/findPolicyGroup",
        data: {}
      },
      res => {
        this.spinShow = false;
        this.notpolicyGroup = res.notpolicyGroup;
        this.policyGroup = res.policyGroup;
      }
    );
  },
  mounted() {}
};
</script>
